<template>
    <el-row>
        <el-col :span="4" class="border" style="height: 100vh">
            <div class="border-bottom">
                <el-menu default-active="2" class="el-menu-vertical-demo"
                         text-color="#000" active-text-color="#ffd04b" @select="handleOpen">
                    <el-sub-menu index="1">
                        <template #title><i class="fa fa-fw fa-bug"></i> <span>目录结构说明</span></template>
                        <el-menu-item index="/md/src.md">src</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title><i class="fa fa-fw fa-bug"></i> <span>文档分类2</span></template>
                        <el-menu-item index="/md/example1.md">src目录</el-menu-item>
                        <el-menu-item index="/md/example2.md">博客2</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
        </el-col>
        <el-col :span="20" class="scroll padding" style="box-sizing: border-box;max-height: 100vh">
            <sea-markdown :content="content" readonly></sea-markdown>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">

import {ref} from "vue";

const content = ref('');

const handleOpen = (key, arr) => {
    if (arr.length > 0) {
        fetch(arr[arr.length - 1])
            .then(response => response.text())
            .then(txt => content.value = txt);
    }
}
</script>